<template>
  <div class="app-container">
    <el-table :data="tableList" highlight-current-row>
      <el-table-column label="ID" align="center" prop="id" width="50" />
      <el-table-column label="换位信息" align="center" prop="info" width="600">
        <template slot-scope="scope">
          <div class="user-box">
            <div style="display: flex; align-items: center">
              <div style="margin-right: 6px">
                用户ID：{{ scope.row.userId }}
              </div>
              <el-image
                style="width: 50px; height: 50px; margin-right: 5px"
                :src="scope.row.avatar"
              ></el-image>
              <div>
                <div>昵称：{{ scope.row.userName }}</div>
                <div>手机号：{{ scope.row.phone }}</div>
              </div>
            </div>
            <div style="display: flex; align-items: center">
              <div>换位前位置：{{ scope.row.beforeLoca }}</div>
              <div>换位后位置：{{ scope.row.afterLoca }}</div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" prop="status">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status == 0" type="danger">换位失败</el-tag>
          <el-tag v-if="scope.row.status == 1" type="success">换位成功</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="失败原因"
        align="center"
        prop="failInfo"
        width="160"
      />
      <el-table-column
        label="创建时间"
        align="center"
        prop="createTime"
        width="180"
      />
      <el-table-column label="操作" align="center" fixed="right" width="180">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="checkTeam"
            >查看团队</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- total -->
    <pagination
      v-show="tableList.length > 0"
      :total="tableList.length"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>
      <el-table :data="teamTableList" highlight-current-row>
        <el-table-column label="会员ID" align="center" prop="id" width="80" />
        <el-table-column label="基本信息" align="center" prop="userName">
          <template slot-scope="scope">
            <div class="user-box">
              <el-image
                style="width: 50px; height: 50px; margin-right: 5px"
                :src="scope.row.avatar"
              ></el-image>
              <div>
                <div>{{ scope.row.userName }}</div>
                <div>{{ scope.row.phone }}</div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="更换前平台补贴用户"
          align="center"
          prop="beforeUpdateUserName"
        >
          <template slot-scope="scope">
            <div class="user-box">
              <el-image
                style="width: 50px; height: 50px; margin-right: 5px"
                :src="scope.row.beforeUpdateAvatar"
              ></el-image>
              <div>
                <div>用户ID：{{ scope.row.beforeUpdateUserId }}</div>
                <div>{{ scope.row.beforeUpdatePhone }}</div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="更换后平台补贴用户"
          align="center"
          prop="afterUpdateUserName"
        >
          <template slot-scope="scope">
            <div class="user-box">
              <el-image
                style="width: 50px; height: 50px; margin-right: 5px"
                :src="scope.row.afterUpdateAvatar"
              ></el-image>
              <div>
                <div>用户ID：{{ scope.row.afterUpdateUserId }}</div>
                <div>{{ scope.row.afterUpdatePhone }}</div>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <!-- :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList" -->
      <pagination
        v-show="teamTableList.length > 0"
        :total="teamTableList.length"
      />
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Transposition",
  data() {
    return {
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      tableList: [
        {
          id: "21",
          userId: "171879",
          avatar:
            "https://benweimei-1324129472.cos.ap-nanjing.myqcloud.com/images/2024/09/18/image_1726641499_osSCCvE6.jpg",
          userName: "张银萍",
          phone: "17702192515",
          beforeLoca: "5号位",
          afterLoca: "1号位",
          status: 0,
          failInfo: "",
          createTime: "2024-12-21 12:10:26",
        },
        {
          id: "21",
          userId: "171879",
          avatar:
            "https://benweimei-1324129472.cos.ap-nanjing.myqcloud.com/images/2024/09/18/image_1726641499_osSCCvE6.jpg",
          userName: "张银萍",
          phone: "17702192515",
          beforeLoca: "5号位",
          afterLoca: "1号位",
          status: 1,
          failInfo: "",
          createTime: "2024-12-21 12:10:26",
        },
        {
          id: "21",
          userId: "171879",
          avatar:
            "https://benweimei-1324129472.cos.ap-nanjing.myqcloud.com/images/2024/09/18/image_1726641499_osSCCvE6.jpg",
          userName: "张银萍",
          phone: "17702192515",
          beforeLoca: "5号位",
          afterLoca: "1号位",
          status: 1,
          failInfo: "",
          createTime: "2024-12-21 12:10:26",
        },
        {
          id: "21",
          userId: "171879",
          avatar:
            "https://benweimei-1324129472.cos.ap-nanjing.myqcloud.com/images/2024/09/18/image_1726641499_osSCCvE6.jpg",
          userName: "张银萍",
          phone: "17702192515",
          beforeLoca: "5号位",
          afterLoca: "1号位",
          status: 1,
          failInfo: "",
          createTime: "2024-12-21 12:10:26",
        },
      ],
      teamTableList: [
        {
          id: "171843",
          userName: "小曹",
          phone: "15896782074",
          avatar:
            "https://benweimei-1324129472.cos.ap-nanjing.myqcloud.com/images/2024/09/09/image_1725842620_wLlbSn2K.jpg",
          beforeUpdateUserName: "Xia",
          beforeUpdateUserId: "171722",
          beforeUpdatePhone: "13793023199",
          beforeUpdateAvatar:
            "https://benweimei-1324129472.cos.ap-nanjing.myqcloud.com//images/2024/07/10/image_1720601904_wxJmgPqD.jpg",
          afterUpdateUserName: "曹莉杰",
          afterUpdateUserId: "171842",
          afterUpdatePhone:"13793333199",
          afterUpdateAvatar:
            "https://benweimei-1324129472.cos.ap-nanjing.myqcloud.com/images/2024/09/08/image_1725804530_lHEY50W2.jpg",
        },
      ],
    };
  },
  created() {
    this.getList();
  },
  mounted() {},
  methods: {
    // 查询换位记录
    getList() {
      // this.loading = true;
      // listRule(this.queryParams).then((response) => {
      //   this.ruleList = response.rows;
      //   this.total = response.total;
      //   this.loading = false;
      // });
    },
    checkTeam() {
      this.title = "团队平台补贴用户变化";
      this.open = true;
    },
  },
};
</script>

<style lang="less" scoped>
.user-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
